<template>
  <div>
    <table
      border="1"
      width="700"
      style="border-collapse: collapse"
    >
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="all"/> <span>全选</span>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in goodList" :key="index">
          <th><input type="checkbox" v-model="item.checked"/> <span></span></th>
          <th>{{item.name}}</th>
          <th>{{item.price}}</th>
          <th>
            <button @click="dircent(index)">-</button>
            {{item.num}}
            <button @click="addFn(index)">+</button>
            </th>
          <th>{{Price[index]}}</th>
          <th>
            <button @click="delBtn(item.name)">删除</button>
          </th>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>合计:{{allPrice}}</td>
          <td colspan="5">
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
export default {
  data(){
    return {
    }
  },
  computed:{
    ...mapState(['goodList']),
    ...mapGetters(['Price','allPrice']),
    all:{
     set(val){
       this.goodList.forEach(item=>item.checked=val)
     },
     get(){
       return this.goodList.every(item=>item.checked)
     }
    }
  },
  methods:{
  ...mapMutations(['addFn','dircent','delBtn']),
  //增加
  addFn(index){
    this.$store.commit('addFn',index)
  },
  //减少
  dircent(index){
    this.$store.commit('dircent',index)
  },
//删除(上面)
  }
}
</script>

<style>
</style>